<template>
    <div>
        <t-image v-if="qrDataUrl" :src="qrDataUrl" :width="width" :height="height" alt="QR Code"
            :style="{ imageRendering: 'pixelated' }" />
        <div v-else>生成中...</div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import QRCode from 'qrcode';

// 定义 props
interface Props {
    content: string
    width?: number
    height?: number
    color?: {
        dark?: string // 前景色（二维码块）
        light?: string // 背景色
    }
}

const props = withDefaults(defineProps<Props>(), {
    width: 200,
    height: 200,
    color: () => ({ dark: '#000000', light: '#ffffff' })
})

const qrDataUrl = ref<string>('')

// 监听 content、color、size 变化，重新生成二维码
watch(
    () => [props.content, props.width, props.height, props.color],
    async () => {
        if (!props.content) {
            qrDataUrl.value = ''
            return
        }

        try {
            // 使用 qrcode.toDataURL 生成 base64 图片
            const dataUrl = await QRCode.toDataURL(props.content, {
                width: props.width,
                margin: 1,
                color: {
                    dark: props.color.dark ?? '#000000',
                    light: props.color.light ?? '#ffffff'
                }
            })
            qrDataUrl.value = dataUrl
        } catch (err) {
            console.error('生成二维码失败:', err)
            qrDataUrl.value = ''
        }
    },
    { immediate: true, deep: true }
)
</script>